<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
  <script src="../js/vue.min.js"></script>
  <script src="../js/axios.min.js"></script>
<!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>-->
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
      html,body,#app{
          width: 100%;
          height: 100%;
      }
      *{
          margin: 0px;
          padding: 0px;
      }
    .el-header{
      width: 100%;
      background-color: whitesmoke;
      height: 44px;
    }
    el-ul>el-li{
        display: block;

    }
    el-li{
        margin: 0px;
        padding: 0px;
        line-height: 1.3;
        box-sizing: content-box;
        padding-top: 15px;
    }
    .a1:hover{
        background-color: lightgray;
        cursor: pointer;

    }
    .upload{
        cursor: pointer;
    }


  </style>
</head>
<body>
<div id="app">
    <el-container style="width: 100%;height: 100%">
        <el-header>
            <div style="margin-left: 150px;height: 10px">
                <img src="../images/ThreeGayslogo.png" style="line-height: 10px">
                <span style="line-height: 10px">ThreeGays</span>
            </div>
            <div style="float: right;margin-right: 100px">
                <el-button onclick="exit()" style="border: 0px;cursor: pointer;background-color:  whitesmoke">退出</el-button>
            </div>
        </el-header>
        <el-container>
            <el-aside style="margin-left: 200px">
                <el-div>
                    <el-div >
                        <el-avatar :src="url" :fit="fit" :size="100" style="margin-top: 50px;background-size: contain"></el-avatar>
                        <el-span style="display: block;padding-top: 20px;padding-left: 30px">{{username}}</el-span>
                    </el-div>
                    <el-div>
                        <el-ul>
                            <el-li>
                                <el-div  onclick="submit()" style="width: 180px;height:40px;box-sizing: border-box;display: flex;border-radius: 10px" class="a1">
                                    <i class="el-icon-user" style="padding-left: 20px;line-height: 40px"></i>
                                    <el-span style="line-height: 40px;padding-left: 5px">个人信息</el-span>
                                </el-div>
                            </el-li>
                            <el-li>
                                <el-div  onclick="submit()" style="width: 180px;height:40px;box-sizing: border-box;display: flex;border-radius: 10px" class="a1">
                                <i class="el-icon-lock" style="padding-left: 20px;line-height: 40px"></i>
                                <el-span style="line-height: 40px;padding-left: 5px">账号安全</el-span>
                            </el-div>
                            </el-li>
                            <el-li>
                                <el-div  onclick="" style="width: 180px;height:40px;box-sizing: border-box;display: flex;border-radius: 10px" class="a1">
                                <i class="el-icon-bank-card" style="padding-left: 20px;line-height: 40px"></i>
                                <el-span style="line-height: 40px;padding-left: 5px">我的订单</el-span>
                            </el-div>
                            </el-li>
                            <el-li>
                                <el-div  onclick="" style="width: 180px;height:40px;box-sizing: border-box;display: flex;border-radius: 10px" class="a1">
                                    <i class="el-icon-bell" style="padding-left: 20px;line-height: 40px"></i>
                                    <el-span style="line-height: 40px;padding-left: 5px">收货地址</el-span>
                                </el-div>
                            </el-li>
                        </el-ul>
                    </el-div>
                </el-div>
            </el-aside>

                <el-main style="margin-left: 80px">
                    <div style="margin-right: 300px;margin-top: 50px; display: none">
                      <div >
                        <el-span style="margin-left: 40%;font-size: 30px">个人信息</el-span>
                    </div>
                        <div style="height: 50px;margin-top: 30px" onclick="" class="upload">
                            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                            <span style="line-height: 50px">头像</span>
                            <i class="el-icon-arrow-right" style="float: right;line-height: 50px"></i>
                        </div>
                        <hr>
                        <div style="margin-top: 30px;" >
                            <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign" style="margin-left: 100px;margin-top: 50px" @select-change="handleselectionchange">
                                <el-form-item label="昵称">
                                    <el-input v-model="formLabelAlign.username" placeholder="请输入内容" style="width: 300px;border-radius: 10px"  clearable></el-input>
                                </el-form-item>
                                <el-form-item label="邮箱">
                                    <el-input v-model="formLabelAlign.email" placeholder="请输入邮箱" style="width: 300px;border-radius: 10px" clearable></el-input>
                                </el-form-item>
                                <el-form-item label="电话号">
                                    <el-input v-model="formLabelAlign.telphone" placeholder="请输入电话号" style="width: 300px;border-radius: 10px"  clearable></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="submit">保存</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                    <div style="margin-right: 300px;margin-top: 50px; display: block">
                        <div >
                            <el-span style="margin-left: 40%;font-size: 30px">账号与安全</el-span>
                        </div>
                        <div style="height: 50px;margin-top: 30px" onclick="" class="upload">
                            <span style="line-height: 50px">账号管理方式</span>
                            <p>您可使用手机号、邮件地址第三方帐号管理华为帐号</p>
                        </div>

                        <hr>
                        <div style="margin-top: 30px;" >
                            <i class="el-icon-key">更改密码</i>
                            <el-input v-model="input_pwd"></el-input>
                        </div>
                    </div>

                </el-main>
        </el-container>
                <el-footer style="margin-bottom: 0px;background-color:  whitesmoke ">
                    <div style="height: 50px ">
                        <p style="text-align: center;line-height: 50px">三人行账号用户协议</p>
                    </div>
                </el-footer>
        </el-container>


</div>

<script>
  var vue = new Vue({
      el: "#app",
      data() {
          return {
              url: '../images/back-header.jpg',
              fit: 'fill',
              username: 'smile',
              input: '',
              labelPosition: 'right',
              input_pwd:'',
              formLabelAlign: {
                  username: '',
                  telphone: '',
                  email: ''
              },
          }
      },
      methods: {
          handleselectionchange(){

          },
          submit(){
              axios({
                  url:"../saveuser.s",
                  params:{
                      username:this.formLabelAlign.username,
                      telphone:this.formLabelAlign.telphone,
                      email:this.formLabelAlign.email
                  }
              }).then(res=>{
                  this.$alert(res.data.msg);
              });
          }
      },
      created() {
          axios({
              url: "../QueryUser.s",
          }).then(res => {
              this.formLabelAlign= res.data.data;
          })
      }

  });
</script>
</body>
</html>